<template>
  <el-container class="member-detail-container">
    <el-main v-loading="member.loadings" class="main">
      <el-card class="member-info-card">
        <template #header>
          <div class="card-header">
            <span>会员基本信息</span>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ props.data.name }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ props.data.email }}</el-descriptions-item>
          <el-descriptions-item label="会员等级">{{ member.viplist.vipname }}</el-descriptions-item>
          <el-descriptions-item label="会员有效期">{{
            member.viplist.vipimt
          }}</el-descriptions-item>
          <el-descriptions-item label="会员折扣">{{ member.viplist.vipdis }}</el-descriptions-item>
          <el-descriptions-item label="积分">{{ member.viplist.point }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card class="member-info-card">
        <div>
          <el-form ref="checkoutForm" label-width="120px" :inline="true">
            <el-form-item label="支付方式">
              <el-select
                v-model="member.paymentMethod"
                placeholder="请选择支付方式"
                style="width: 240px"
              >
                <el-option label="现金" value="cash"></el-option>
                <el-option label="微信支付" value="wxan"></el-option>
                <el-option label="支付宝" value="suvy"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="应付金额">
              <el-tag :closable="false" color="danger"
                >￥{{ parseFloat(member.viplist.pric).toFixed(2) }}</el-tag
              >
            </el-form-item>
          </el-form>
        </div>
        <div style="float: right; margin-bottom: 20px">
          <el-button type="success" @click="renewMembership">去付款</el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>
<script setup>
import { onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import { Get_Vip_offtrrezw } from "@/api/vip";
import { generate_Pay } from "@/api/offline";

const emit = defineEmits(["myclose"]);

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
    required: true,
  },
});

const member = reactive({
  name: "张三",
  phone: "13800138000",
  email: "zhangsan@example.com",
  level: "黄金会员",
  validity: "2025-12-31",
  points: 1200,
  viplist: {},
  paymentMethod: "",
  loadings: false,
});

const renewMembership = async () => {
  if (member.paymentMethod == "") {
    ElMessage.error("请选择支付方式");
    return;
  }
  const res = await generate_Pay({
    oid: props.data.ooid,
    money: member.viplist.pric,
    payment: member.paymentMethod,
  });
  if (res.code === 0) {
    //现金提示
    if (res.message == "成功了") {
      ElMessage({
        message: "现金支付完成",
        type: "success",
      });
      setTimeout(() => {
        emit("myclose");
      }, 1000);
    }
    //微信支付提示
    if (res.message == "success!") {
      location.href = res.data.data;
    }
  }
};

const bind = async () => {
  member.loadings = true;
  const res = await Get_Vip_offtrrezw({
    vipId: props.data.vipId,
    email: props.data.email,
  });
  if (res.code === 0) {
    member.viplist = res.data.data[0];
    console.log(member.viplist.vipimt);
  }
  member.loadings = false;
};

onMounted(() => {
  bind();
});
</script>
<style scoped>
.member-detail-container {
  display: flex;
  flex-direction: column;
  height: 420px;
}

.header {
  background-color: #409eff;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.main {
  flex: 1;
  padding: 12px;
}

.member-info-card,
.member-benefits-card,
.order-history-card,
.consumption-record-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
